<html>
  <head>
    <title>Himalaya</title>
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
    <style>
      * {
        font-family: 'Source Code Pro', monospace;
      }

      .page {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        display: flex;
        flex-direction: column;
        font-size: 0.9em;
      }

      header {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        justify-content: space-between
      }

      header .info {
        display: flex;
        align-items: center;
      }

      header h1 {
        margin: 0;
        padding-right: 10px;
      }

      header a {
        color: #08f;
        text-decoration: none;
        padding: 0px 10px;
      }

      header a:hover {
        text-decoration: underline;
      }

      .converter {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
      }

      .split {
        display: flex;
        align-self: stretch;
        flex-direction: column;
        flex: 1;
        box-shadow: 1px 0 0 #eee;
      }

      .pane {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-self: stretch;
        padding: 20px;
        font-size: 1em;
        border: none;
        margin: 0px;
        outline: none;
        overflow: auto;
      }

      .pane label {
        display: block;
        text-transform: uppercase;
        color: #555;
        margin-bottom: 5px;
      }

      .pane-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #eee;
        padding: 10px 20px;
      }

      pre {
        text-wrap: auto;
      }

      #source {
        flex: 1;
        display: flex;
        align-self: stretch;
        border: none;
        background-color: transparent;
        outline: none;
        padding: 0px;
        font-size: inherit;
      }

      #output {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div class='page'>
      <header>
        <div class='info'>
          <h1>Himalaya</h1>
          <a href='https://github.com/andrejewski/himalaya'>on Github</a>
          <a href='http://chrisandrejewski.com'>by Chris Andrejewski</a>
        </div>
        <div>
          <label>
            <input id='show-stringify-pane' type='checkbox' />
            <span>Show stringify pane</span>
          </label>
        </div>
      </header>
      <div class='converter'>
        <div class='split'>
          <div class='pane-header'>
            <label>HTML</label>
            <label>
              <input id='whitespace' type='checkbox' />
              <span>Remove whitespace</span>
            </label>
          </div>
          <div class='pane pane-source'>
            <textarea id='source' placeholder='<div>HTML to transform</div>'></textarea>
          </div>
        </div>
        <div class='split'>
          <div class='pane-header'>
            <label>JSON (AST)</label>
            <label>
              <input id='positions' type='checkbox' />
              <span>Include positions</span>
            </label>
          </div>
          <div class='pane pane-output'>
            <pre id='output-parse'></pre>
          </div>
        </div>
        <div class='split' id="stringify-pane" style="display: none;">
          <div class='pane-header'>
            <label>Stringify</label>
            <label>
              <input id='prefer-double-quote-attributes' type='checkbox' />
              <span>Prefer double quote attributes</span>
            </label>
          </div>
          <div class='pane pane-output'>
            <pre id='output-stringify'></pre>
          </div>
        </div>
      </div>
    </div>

    <script src='dist/himalaya.js'></script>
    <script>
      function removeEmptyNodes (nodes) {
        return nodes.filter(node => {
          if (node.type === 'element') {
            node.children = removeEmptyNodes(node.children);
            return true
          }
          return node.content.length
        })
      }

      function stripWhitespace (nodes) {
        return nodes.map(node => {
          if (node.type === 'element') {
            node.children = stripWhitespace(node.children)
          } else {
            node.content = node.content.trim()
          }
          return node
        })
      }

      function removeWhitespace(nodes) {
        return removeEmptyNodes(stripWhitespace(nodes))
      }

      function $ (selector) {
        return document.querySelector(selector)
      }

      function updateOutput () {
        var html = $('#source').value || ''
        himalaya.parseDefaults.includePositions = $('#positions').checked

        var code = himalaya.parse(html)
        if ($('#whitespace').checked) {
          code = removeWhitespace(code)
        }

        $('#output-parse').innerText = JSON.stringify(code, null, 2)

        var options = { ...himalaya.parseDefaults, preferDoubleQuoteAttributes: $('#prefer-double-quote-attributes').checked }
        $('#output-stringify').innerText = himalaya.stringify(code, options)
      }

      $('#source').onkeyup = updateOutput
      $('#whitespace').onchange = updateOutput
      $('#positions').onchange = updateOutput
      $('#prefer-double-quote-attributes').onchange = updateOutput
      updateOutput()

      function updatePaneDisplay () {
        $('#stringify-pane').style.display = $('#show-stringify-pane').checked ? 'flex' : 'none'
      }

      $('#show-stringify-pane').onchange = updatePaneDisplay
    </script>
  </body>
</html>
